<script setup>
import { ref } from 'vue';


// 1. reactive函数的使用
// 接收复杂类型的数据(对象, 数组), 返回一个响应式对象
// const person = reactive({
//   name: '张胜男',
//   age: 18,
//   sex: '女'
// })
// console.log(person)
// reactive函数不支持把简单的数据转成响应式属性
// const money = reactive(10000)

// 2. ref函数的使用
// 接收复杂或简单的数据, 返回一个响应式对象
// 在模板中使用, 则直接用, 但是要在script中使用, 请.value
const money = ref(9999)
console.log(money.value)

const person = ref({
  name: '张胜男',
  age: 18,
  sex: '女'
})
console.log(person.value.name, person.value.age, person.value.sex)
</script>

<template>
  <div>
    姓名:{{ person.name }} ,年龄: {{ person.age }} ,性别: {{ person.sex }}
    <button @click="person.name='不知火舞'">修改姓名</button>
    <br>
    钱包: {{ money }}
    <button @click="money++">搬砖一个月</button>
  </div>
</template>

<style scoped></style>
